<template>
    <div>
        <button @click="get()" v-show="false">
            获取
        </button>
        <div>
            <el-table :data="WholeAnswer" id="exportTab">
                <el-table-column prop="answer.ansDate" label="答卷提交时间">
                </el-table-column>


                <el-table-column  v-for="(item,index) in WholeAnswer[0].details" 
                    :key="index"  :label="title[index].content">
                    <template slot-scope="scope">
                        <i class="el-icon-time"></i>
                        <span style="margin-left: 10px">{{scope.row.details[index].detContent}}</span>
                    </template>

                </el-table-column>


                
            </el-table>
        </div>

        <button @click="log()" v-show="false">打印</button>
        <el-button @click="exportExcel()">导出</el-button>
    </div>
</template>
<script>
　　　　import FileSaver from  'file-saver'

　　　　 import XLSX from 'xlsx'

export default {
    data () {
        return {
            index:1,
            surId:33,
            title:[],
            //这里的wholeanswer是数组，传过来的wholeanswers才对应数组
            
                WholeAnswer:[{
                    answer:{
                        ansId:'',
                        surId:'12',
                        ansDate:'2021-6-1'
                    },
                    details:[]
                }],
                survey:{ 

                },



              json_fields: {  //导出Excel表格的表头设置
	          '序号': 'answer.ansId',
	          '姓名': 'answer.ansDate',
	          '年龄': 'details[0].detContent',
	          '手机号': 'phone',
	          '注册时间': 'createTime',
          },

            

        }
    },
    methods: {
        get(){

            this.$axios.post(this.$store.state.url+'/answer/getAnswer',this.$route.params.surId,{
            headers: {'Content-Type': 'application/json; charset=UTF-8'}})
            .then(res=>{
                this.WholeAnswer=res.data.data.wholeAnswers;
                console.log(res.data.data.wholeAnswers);
                console.log(this.WholeAnswer);
            })

             // console.log(this.WholeAnswer);
        },
        log(){
            console.log(this.WholeAnswer[0].details[0].detContent)
            console.log(this.WholeAnswer)
        },
        exportExcel () {
            /* generate workbook object from table */
            var xlsxParam = { raw: true } // 导出的内容只做解析，不进行格式转换
            var wb = XLSX.utils.table_to_book(document.querySelector('#exportTab'), xlsxParam)

            /* get binary string as output */
            var wbout = XLSX.write(wb, { bookType: 'xlsx', bookSST: true, type: 'array' })
            try {
                FileSaver.saveAs(new Blob([wbout], { type: 'application/octet-stream' }), '答卷分析表.xlsx')
            } catch (e) {
                if (typeof console !== 'undefined') {
                console.log(e, wbout)
                }
            }
            return wbout
        }
    },
    created () {
            this.surId=this.$route.params.surId;
            this.$axios.post(this.$store.state.url+'/answer/getAnswer',this.surId,{
            headers: {'Content-Type': 'application/json; charset=UTF-8'}})
            .then(res=>{
                this.WholeAnswer=res.data.data.wholeAnswers;
                console.log(res.data.data.wholeAnswers);
                console.log(this.WholeAnswer);
            });



            this.$axios.post(this.$store.state.url+'/answer/gettitle',this.surId,{
            headers: {'Content-Type': 'application/json; charset=UTF-8'}})
            .then(res=>{
                //this.WholeAnswer=res.data.data.wholeAnswers;
                console.log(res.data.data.title);
                this.title=res.data.data.title;
                console.log(this.title);
            });
    }
}
</script>